<template>

  <el-popover v-for="item in data" trigger="contextmenu" class="box-item" placement="right-start" width="100">
    <div class="df fdc">
      <div @click="create_folder_by_icon(item)" class="df aic cp wfc hfc">
        <img class="create-icon" src="@/assets/imgs/createFolder.png" alt="" />
        <p class="ml10 fw600 fs12">新建文件夹</p>
      </div>
      <div @click="addChildFolder(item)" v-show="!isMaxDepth" class="df aic cp wfc hfc mt10">
        <img class="create-icon" src="@/assets/imgs/folder.png" alt="" />
        <p class="ml10 fw600 fs12">新建子文件夹</p>
      </div>
      <div @click="moveFolder(item)" class="df aic cp wfc hfc mt10">
        <img class="create-icon" src="@/assets/imgs/move_folder.png" alt="" />
        <p class="ml10 fw600 fs12">移动文件夹</p>
      </div>
      <div @click="renameFolder(item)" class="df aic cp wfc hfc mt10">
        <img class="create-icon" src="@/assets/imgs/rename.png" alt="" />
        <p class="ml10 fw600 fs12">重命名</p>
      </div>
      <div @click="delete_folder(item)" class="df aic cp wfc hfc mt10">
        <img class="create-icon" src="@/assets/imgs/del.png" alt="" />
        <p class="ml10 fw600 fs12">删除文件夹</p>
      </div>
    </div>
    <template #reference>
  <div class="mt10 cp">
    <div @contextmenu="(e) => contextmenu(e, item)" class="pr" style="pointer-events: all;"
      :style="{ 'display': (item.show || item.deep == 1) ? 'flex' : 'none' }">
      <div :style="{ 'padding-left': (item.deep - 1) * 15 + 'px' }" class="df aic">
        <img @click="changeOpen(item)" :class="item.open ? 're' : 'normal'" src="@/assets/imgs/icon-right.png"
          style="width: 16px;height: 16px;" alt="">
        <img class="ml5" src="@/assets/imgs/folder.png" style="width: 16px;height: 16px;" alt="">
        <div @dbclick="dbClick(item)" class="ml10">{{ item.name }}</div>
      </div>
    </div>
    <div v-if="item.children && item.children.length">
      <folder-item v-for="child in item.children" :data="item.children" :key="child"></folder-item>
    </div>
  </div>
  </template>
  </el-popover>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'


const props = defineProps({
  data: Array,
  index: Number
})
const emit = defineEmits(['create-folder', 'add-child-folder', 'delete-folder', 'refres-list', 'move-folder', 'rename-folder', 'change-status'])
const listData = ref([])

const contextmenu = (e, target) => {
  e.preventDefault()
  nextTick()
  // props.data = props.data.map(item=>{
  //   if(item.id == target.id){
  //     item.isSHowMenuItem = true
  //   }else{
  //     item.isSHowMenuItem = false
  //   }
  // })
  emit('change-status', target)
  console.log(target, 'target_______');
}
const changeOpen = (e) => {
  // console.log(e,'eeeeeee');
  e.open = !e.open
  // e.show = !e.show
  if (e.children.length > 0) {
    e.children = e.children.map(item => {
      item.show = !item.show
      return item
    })
  }
}

const dbClick = (e) => {
  console.log(e);
}

const testContext = (e) => {
  console.log(e);
  e.preventDefault();
}
const loadingList = (e) => {
  console.log(e);
  emit('refres-list', e)
}
const create_folder_by_icon = (e) => {
  emit('create-folder', e)
}
const addChildFolder = (e) => {
  emit('add-child-folder', e)
}
const moveFolder = (e) => {
  emit('move-folder', 'e')
}
const renameFolder = (e) => {
  emit('rename-folder', e)
}
const delete_folder = (e) => {
  emit('delete-folder', e)
}

watch(() => props.data, (newVal) => {
  if (newVal) {
    listData.value = props.data
  }
})
</script>
<style lang="scss" scoped>
.create-icon {
  width: 16px;
  height: 16px;
}

.normal {
  transition: transform .3s ease;
  transform: rotate(0deg);
}

.re {
  transition: transform .3s ease;
  transform: rotate(90deg);
}

ul {
  list-style: none;
}
</style>